<template>
  <div class="app-container">
    <!--标题-->
    <div class="title-container">
      <h3 class="title">组织详情</h3>
    </div>
    <div class="nameShow">
      <div class="nameShow-btn">
        <el-button @click="router.back()">返回</el-button>
        <div>
          <el-button type="primary" @click="editDept">编辑</el-button>
          <el-button type="primary" @click="deleteItem">删除</el-button>
        </div>

      </div>
      <div class="nameShow-content">
        <div class="nameShow-content-title">
          <img src="./static/home.png" alt="" style="width: 20px">
          {{formData.parentName}}
          {{formData.deptName}}
        </div>
        <div class="name-content-code">
          组织代码 {{formData.orgCode}}
        </div>
      </div>
    </div>
    <el-divider content-position="left">
      <div class="driver-content" style="font-size: 17px; font-family: 黑体;">基础信息</div>
    </el-divider>
    <el-row>
      <el-col :span="12" class="colStyle">
        <span class="content-title">组织名称</span>
        <span class="content-text">{{formData.deptName}}</span>
      </el-col>
      <el-col :span="12" class="colStyle">
        <span class="content-title">组织代码</span>
        <span class="content-text">{{formData.orgCode}}</span>
      </el-col>
      <el-col :span="12" class="colStyle">
        <span class="content-title">上级组织</span>
        <span class="content-text">{{formData.parentName}}</span>
      </el-col>
      <el-col :span="12" class="colStyle">
        <span class="content-title">组织负责人</span>
        <span class="content-text">{{formData.leader}}</span>
      </el-col>
      <el-col :span="12" class="colStyle">
        <span class="content-title">工作地点</span>
        <span class="content-text">{{formData.locationName}}</span>
      </el-col>
      <el-col :span="12" class="colStyle">
        <span class="content-title">工作城市</span>
        <span class="content-text">{{formData.city}}</span>
      </el-col>
    </el-row>


  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {getDept} from '@/api/system/dept'
//数据
const formData = reactive({
  deptName: '',
  orgCode: '',
  parentDeptName: '',
  leader: '',
  locationName: '',
  city: ''
})

const router = useRouter();
//方法
//初始化数据
onMounted(() => {
  getDept(router.currentRoute.value.query.deptId).then(res => {
    console.log(res.data);
    formData.deptName = res.data.deptName
    formData.orgCode = res.data.orgCode
    formData.parentName = res.data.parentName
    formData.leader = res.data.leader
    formData.locationName = res.data.locationName
    formData.city = res.data.city
  })
})
//跳转到编辑组织页面
function editDept() {
  router.push({
    name: 'EditZuzhi',
    query: {
      deptId: router.currentRoute.value.query.deptId
    }
  })
}
//删除组织
function deleteItem() {

}

</script>

<style>
.title-container {
  position: relative;
  padding: 1px 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.title-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #409EFF;
}
.nameShow-btn {
  display: flex;
  justify-content: space-between;
}
.nameShow-content {
  padding: 50px;
  text-align: center;
}
.nameShow-content-title {
  font-size: 20px;
  font-weight: 600;
}
.name-content-code {
  color: gray;
  margin-top: 10px;
}
.colStyle {
  padding: 10px 0;
}
.content-title {
  color: gray;
  width: 120px; /* 固定宽度 */
  text-align: right; /* 右对齐 */
  margin-right: 10px; /* 与 content-text 的间距 */
  display: inline-block; /* 确保 width 生效 */
}

</style>